<template>
<view class="gk_page">
	<view class="tab_div">	
		<view @click="changeA(item.id)" class="tab_item" :class="{tab_item_a:active==item.id}" v-for="(item,index) in tabList" :key="index">
			<image :src="item.img" mode="heightFix"></image>
			<view class="tab_wap">{{item.name}}</view>
		</view>
	</view>
	<scroll-view scroll-y="true" class="content_div" :lower-threshold='100' :scroll-y="true"  @scrolltolower='getMore'>
		<view class="" style="position: relative;">
			<view class="xx_header">
				<!-- <image class="img_l" src="~@/static/image/left_div.png" mode="heightFix"></image> -->
				<view class="xx_text">{{tabList[active-1].name}}</view>
				<image class="bgm" :class="isStop?'':'zhuan'" @click='changeBgm' src="https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_gz/bgm.png" mode=""></image>
				<!-- <image class="img_r" src="~@/static/image/right_div.png" mode="heightFix"></image> -->
			</view>
			<mp-html class="c_content"
					:content="active==1?data.content:
									active==2?data.local_content:
									active==3?data.invest_content:
									active==4?data.chain_content:
									active==5?data.invest_service:
									active==6?data.policy_content:''"
			></mp-html>
		</view>
		<!-- <listPage  v-if="active==6" type_name='policy' height='calc(100% - 90px)' :isMore='true' :list='list' :total='total' @toMore='toMore' @getMore='getMore'>
			<endlist :isLoad='isLoad' :isfinsh='isfinsh' :length='list.length'></endlist>
		</listPage> -->
	</scroll-view> 
</view>
</template>

<script>
	import img1 from '@/static/image/gk_icon1.png'
	import img2 from '@/static/image/gk_icon2.png'
	import img3 from '@/static/image/gk_icon3.png'
	import img4 from '@/static/image/gk_icon4.png'
	import img5 from '@/static/image/gk_icon5.png'
	import img6 from '@/static/image/gk_icon6.png'

	 
	import endlist from '@/components/endlist.vue' 
	import listPage from '@/components/listPage.vue' 
	import { GetSuCityInfo,policy } from '@/utils/api.js'
	
	let innerAudioContext= null
	export default {
		data() {
			return {
				tabList:[
					{name:'钟祥介绍',id:1,img:img1},
					{name:'风土人情',id:2,img:img2},
					{name:'营商环境',id:3,img:img3},
					{name:'经济发展',id:4,img:img4},
					{name:'投资咨询',id:5,img:img5},
					{name:'政策汇编',id:6,img:img6},
				],
				active:1,
				data:{
					content:'',
					chain_content:'',
					invest_content:''
				},
				list:[],
				page:1,
				isLoad:false,
				isfinsh:false,
				total:0,
				imgarr:[],
				
				isStop:true,
			}
		},
		components:{
			listPage,
			endlist
		},
		onShareTimeline() {
			return {
				title: '钟祥概况 | 一码投钟祥',
			}
		},
		onShareAppMessage(){
			return {
				title: '钟祥概况'+' | 一码投钟祥',
			}
		},
		onHide(){
			if(innerAudioContext){
				innerAudioContext.stop()
				innerAudioContext.destroy()
			}
		},
		onUnload(){
			if(innerAudioContext){
				innerAudioContext.stop()
				innerAudioContext.destroy()
			}
		},
		onLoad(){
			GetSuCityInfo({city_id:uni.getStorageSync('myCity').id}).then(res=>{
				// res.data.chain_content.replace('<img','<img style="width:100% !important"')
				this.data = res.data
			})
			this.getList()
			
			
		},
		onReady(){
			innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			innerAudioContext.src = 'https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/ymt_gz/js_bgm.mp3';
			innerAudioContext.onPlay(() => {
			  console.log('开始播放');
				this.isStop = false
			});
			innerAudioContext.onError((res) => {
			  console.log(res.errMsg);
			  console.log(res.errCode);
			});
		},
		methods: {
			changeBgm(){
				if(this.isStop){
					innerAudioContext.play()
				}else{
					innerAudioContext.stop()
				}
				this.isStop = !this.isStop
			},
			catchImage(e){
				this.imgarr=[]
				let text = this.active==1?this.data.content:
										this.active==2?this.data.local_content:
										this.active==3?this.data.invest_content:
										this.active==4?this.data.chain_content:
										this.active==5?this.data.invest_service:this.data.policy_content
				let regex = new RegExp(/<img.*?(?:>|\/>)/gi); // 匹配所有图片
				let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src图片
				let arrsImg = text.match(regex); 
				
				console.log(arrsImg)
				for (let i = 0; i < arrsImg.length; i++) {
					let srcs = arrsImg[i].match(srcReg);
					this.imgarr.push(srcs[1])
				}
				
				if(this.imgarr.length>0){
					uni.previewImage({
						current: this.imgarr[0], // 当前显示图片的http链接
						urls: this.imgarr // 需要预览的图片http链接列表
					})
				}
			},
			toMore(id){
				uni.navigateTo({
					url:'/pages/policyList/policyList'
				})
			},
			toAdd(){
				uni.navigateTo({
					url:'/pages/sqpage/sqpage'
				})
			},
			getMore(){
				if(this.active==6){
					this.page+=1
					this.getList()
				}
			},
			getList(){
				this.isLoad = true
				policy.getList({page:this.page,role_id:uni.getStorageSync('role_id'),city_id:uni.getStorageSync('myCity').id}).then(res=>{
					this.list.push(...res.data.data)
					this.total = res.data.total
					if(this.page>=res.data.last_page){
						this.isfinsh = true
					}
					this.isLoad = false
				})
			},
			changeA(id){
				this.active=id
			}
		}
	}
</script>

<style scoped lang="scss">
// @font-face {
// 	font-family: "song";
// 	src: url('https://bigdataapi.parkic.com/static/ttf/song.ttf'),
// }
// @font-face {
// 	font-family: "kai";
// 	src: url('https://bigdataapi.parkic.com/static/ttf/kai.ttf'),
// }
page{
	height: 100%;
}
.gk_page{
	height: calc(100% - 30px);
	padding: 15px;
	background: #fff;
	// background: url(https://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/20230614153024.jpg) no-repeat;
	background-size: 100% 100%;
	.tab_div{
		width: 100%;
		overflow-x: auto;
		display: flex;
		padding: 0 0 5px 0;
		color: #95875E;
		.tab_item{
			min-width: 21%;
			margin-right: 10px;
			// box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
			border-radius: 6px;
			height: 80px;
			font-size: 16px;
			font-weight: 500;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				height: 30px;
				margin-bottom: 6px;
			}
		}
		.tab_wap{
			// font-size: 13px;
		}
		.tab_item_a{
			color: #fff;
			background: linear-gradient(360deg, #DAAE45 0%, #95875E00 100%);
		}
	}
	.content_div{
		border-radius: 10px;
		// box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
		margin-top: 15px;
		max-height: calc(100% - 120px);
		overflow: auto;
		position: relative;
		&::v-deep img{
			width: 100% !important;
		}
	}
	.xx_header{
		height: 60px;
		position: sticky;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		// background: #fff;
		.xx_text{
			font-family: 'song';
			font-weight: 600;
			margin: 0 12px;
			font-size: 26px;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 1);
		}
		.img_l,.img_r{
			height: 18px;
		}
	}
	
	.c_content{
		padding: 0 12px;
		font-family: 'kai';
	}
}

.list_item{
	display: flex;
	justify-content: space-between;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0px 1px 10px 0px #0A477519;
	margin: 10px 10px 15px;
	image{
		width: 48px;
		height: 48px;
		margin-right: 12px;
		border-radius: 24px;
	}
	.i_right{
		width: calc(100% - 60px);
		.i_name{
			margin-bottom: 6px;
		}
	}
}
.top_ding{
	background-color: #fff;
	z-index: 10;
	font-size: 12px;
	padding:0px 10px 4px;
	display: flex;
	justify-content: space-between;
	.more_div{
		color: #0091FF;
	}
}

.bgm{
	position: fixed;
	top:120px;
	right:20px;
	width:36px;
	height:36px;
}

@keyframes zhuan{
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(180deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

.zhuan{
	animation: zhuan 4s linear  infinite
}
</style>
